{% extends 'bk_management/base.html' %}
{% block content  %}
     <div class="container-fluid">
            <!--添加商品类型按钮-->
          <div class="row">
                <button class="btn btn-primary col-lg-2 ml-auto" data-toggle="modal" data-target="#goods_modal">添加商品</button>
          </div>
          <h1></h1>
            <!--商品类型列表-->
          <div class="row">
              <table class="table" style="text-align: center">
                  <thead>
                    <tr style="font-size: 24px">
                        <th>商品类型编号</th>
                        <th>商品类型名称</th>
                        <th>商品类型图片</th>
                        <th>商品类型操作</th>
                    </tr>
                  </thead>
                  {% for gt in gts %}
                      <tr style="line-height:115px ;font-size: 20px">
                          <td>{{ gt.id }}</td>
                          <td>{{ gt.gt_name }}</td>
                          <td><img src="/static/{{ gt.gt_picture }}" style="width: 60px"></td>
                          <td>
                              <a href="#" data-toggle="modal" data-target="#edit_gtype" onclick="Values({{ gt.id }})">修改</a> |
                              <a href="/bk/del_gtype/{{ gt.id }}/" >删除</a>
                          </td>
                      </tr>
                  {% endfor %}
              </table>
          </div>
          <h1></h1>
            <!--分页-->
          <div class="row">
                <ul class="pagination ml-auto">
                    <li class="page-item">
                        <a class="page-link">上一页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link">1</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link">2</a>
                    </li>
                                        <li class="page-item">
                        <a class="page-link">3</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link">4</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link">下一页</a>
                    </li>
                </ul>
          </div>
        </div>
    <!-- 添加商品类型界面 -->
      <div class="modal fade" id="goods_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-label="true">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">添加商品类型</div>
              <div class="modal-body">
                  <form class="form" method="POST" action="/bk/add_gtype/" enctype="multipart/form-data">
                      {% csrf_token %}
                      <div class="form-group">
                        <label class="">商品类型名称</label>
                        <input class="form-control" type="text" name="gt_name">
                      </div>
                      <div class="form-group">
                        <label class="">商品类型图片</label>
                        <input class="form-control" type="file" name="gt_picture">
                      </div>
                      <button class="btn btn-primary fa-pull-right" type="submit">提交商品</button>
                  </form>
              </div>
          </div>
      </div>
  </div>
    <!-- 修改商品界面 -->
    <div class="modal fade" id="edit_gtype" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-label="true">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">修改类型信息</div>
              <div class="modal-body">
                  <form class="form" method="POST" action="/bk/edit_gtype/" enctype="multipart/form-data">
                      {% csrf_token %}
                      <input type="hidden" id="id" name="id" value="">
                      <div class="form-group">
                        <label class="">修改类型名称</label>
                        <input id="edit_name" class="form-control" type="text" name="gt_name" value="">
                      </div>
                      <div class="form-group">
                        <label class="">修改类型图片</label>
                        <input id="edit_picture" class="form-control" type="file" name="gt_picture" value="">
                      </div>
                      <button class="btn btn-primary fa-pull-right" type="submit">提交修改</button>
                  </form>
              </div>
          </div>
      </div>
  </div>
{% endblock %}
{% block script %}
    <!-- Bootstrap core JavaScript-->
  <script src="/static/bk_management/vendor/jquery/jquery.min.js"></script>
  <script src="/static/bk_management/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Core plugin JavaScript-->
  <script src="/static/bk_management/vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for all pages-->
  <script src="/static/bk_management/js/sb-admin-2.min.js"></script>

  <script>
    {#$("edit_gtype").modal('hide');#}
    function Values(id){
        $('#id').val(id);
    }
  </script>
{% endblock %}s
